<style lang="scss" scoped>
.problem-root {
	min-height: 100vh;
	background-color: #F5F5F5;
	position: relative;
}

.problem-cell {
	margin-top: 1rpx;
	display: block;
}

.problem-cell:first-of-type {
	margin-top: 22rpx;
}

.problem-man {
	width: 100%;
	position: absolute;
	bottom: 0;
}

.problem-man-title {
	$height: 24rpx;
	height: $height;
	line-height: $height;
	font-size: $height;
	font-weight: 500;
	color:rgba(0, 0, 0, 0.5);
	text-align: center;
	margin-bottom: 33rpx;
}

.problem-man-button {
	height: 100rpx;
	background-color: #F24244;
	font-size: 32rpx;
	color: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>

<template>
<view class="problem-root">

	<nav-bar
		title="常见问题"
		fixed
		cover
		@on-back="$navigateBack()"
	></nav-bar>

	<cell class="problem-cell" title="关于电影" @click="onClickCell"/>
	<cell class="problem-cell" title="关于加油" @click="onClickCell"/>
	<cell class="problem-cell" title="关于其他服务" @click="onClickCell"/>
	<cell class="problem-cell" title="关于找到合作渠道" @click="onClickCell"/>
	
	<!-- 人工客服 -->
	<view class="problem-man">
		<view class="problem-man-title ellipsis">仍有疑问，请联系人工客服(北京时间09:00 ~ 18:00)</view>

		<button class="problem-man-button" @click="onClickMan">人工客服</button>

		<apple-sliver class="apple-sliver" background-color="#F24244"></apple-sliver>
	</view>

</view>
</template>

<script>
import Cell from "./cell";

export default {

	components: {
		Cell,
	},

	methods: {

		onClickCell() {
			uni.showToast({title: "关于"});
		},

		onClickMan() {
			uni.showToast({title: "人工客服"});
		}

	}

}
</script>